<template>
  <card-layout title="生态工程" class="chart" bg="2">
    <template #extra>
      <div>具体信息</div>
    </template>
    <div class="content" v-loading="loading" element-loading-background="rgba(255, 255, 255, 0.15)">
      <el-row :gutter="20">
        <el-col :span="11">
          <div class="progress-div">
            <el-progress type="circle" :stroke-width="12" :percentage="60" status="success">
              <template #default="{ percentage }">
                <span class="percentage-value">{{ percentage }}%</span>
                <span class="percentage-label">植被覆盖率</span>
              </template>
            </el-progress>
          </div>
        </el-col>
        <el-col :span="13">
          <div style="margin-top: 20px;">
            <div v-for="(item,index) in ecologyList" :key="index" class="eco-div">
              <span>{{ item.name }}</span>
              <span :style="{color:index==0?'#188df0':index==1?'#04c47d':'orange'}">{{ item.value }}</span>
              <span>个</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </card-layout>
</template>

<script setup>
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const ecologyList = ref([
  {name:'工程总数', value:48},
  {name:'已完成工程数', value:8},
  {name:'进行中工程数', value:40}
])
</script>

<style lang="scss" scoped>
.chart {
  box-sizing: border-box;
  // flex: 1;
  .content {
    height: 200px;
    .eco-div {
      font-family: PangMen;
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      text-align: left;
      height: 50px;
      line-height: 50px;
      >span:nth-child(1) {
        color: #eef1fa;
        margin-right: 20px;
      }
      >span:nth-child(2) {
        font-size: 24px;
        font-weight: 600;
      }
      >span:nth-child(3) {
        color: #eef1fa;
        margin-left: 10px;
      }
    }
  }
  .progress-div {
    margin: 40px 30px;
    .percentage-value {
      display: block;
      margin-top: 10px;
      font-size: 28px;
    }
    .percentage-label {
      display: block;
      margin-top: 10px;
      font-size: 14px;
      font-family: PangMen;
    }
  }
}
</style>
